<template>
	<view class="item" @click="goSet">
		<view class="con">
			<view class="left-title">
				<view class="title-slot" v-if="item.isSlot">
					<slot name="titleSlot"></slot>
				</view>
				<view v-else class="title">{{item.title}}</view>
				<!-- <text class="detail flex flex-direction" v-if="detail != ''">{{detail}}</text> -->
			</view>
			<view class="right-set">
				<view class="set-text" v-if="item.type == 'text'">
					<image :src="goMoreImg"></image>
				</view>
				<view class="set-switch" v-if="item.type == 'switch'">
					<switch @change="changeChecked($event)" :checked="item.checkSwitch" color="#108EE9"
						style="transform: scale(0.7)"></switch>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: {}
			},

			// title: {
			// 	type: String,
			// 	default: ''
			// },
			// detail: {
			// 	type: String,
			// 	default: ''
			// },
			// isSlot: {
			// 	type: Boolean,
			// 	default: false
			// },
			// setType: {
			// 	type: String,
			// 	default: 'text'
			// },
			// checkSwitch: {
			// 	type: Boolean,
			// 	default: false
			// }
		},
		data() {
			return {
				goMoreImg: require('@/static/img/common/goMore.svg')
			}
		},
		methods: {
			goSet() {
				this.$emit('goSet', this.item)
			},
			changeChecked(e) {
				//console.log(e.detail.value)
				this.$emit('changeChecked', this.item, e.detail.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;

		&:active {
			background-color: #F2F2F2;
		}

		.con {
			width: 92%;
			margin-left: 4%;
			display: flex;
			justify-content: space-between;
			height: 100rpx;

			.left-title {

				.title {
					line-height: 100rpx;
					font-size: 28rpx;
				}

			}

			.right-set {
				.set-text {
					image {
						margin-top: 30rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.set-switch {
					line-height: 100rpx;
				}
			}
		}



	}
</style>
